<template>
  <div class="rst-content">
    <div class="rst-content-body">
      <div class="rst-user">
        <image v-if="userMessage.referenceImage" class="user-img" :src="userMessage.referenceImage" mode="aspectFit"></image>
        <div class="time-txt">
          <div class="time">{{ userMessage.time }}</div>
          <u-read-more>
            <div class="txt">{{ userMessage.prompt }}</div>
          </u-read-more>
        </div>
      </div>

      <div class="rst-ai">
        <div class="ai-tip">以下是为你生成的图片：</div>
        <div class="rst-img">
          <div class="rst-img-box" v-for="img in userMessage.multipleImages?.split(',')" @click="activeImg = img">
            <image class="rst-img-item" :src="img" mode="widthFix"></image>
            <image v-if="activeImg === img" class="active"
                   src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%202309%402x.png" mode="aspectFit"></image>
            <div class="cicrle" v-else></div>
          </div>
        </div>
      </div>
    </div>

    <div class="bindChoose" @click="bindGo()" v-if="activeImg">应用素材</div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { getPoints, aiGetById } from '@/api/designApi';
import { onLoad } from '@dcloudio/uni-app';
import { useRouter } from "uni-mini-router";
const router = useRouter();
const userMessage = ref<any>({
  referenceImage: '',
  prompt: '',
  time: '',
  multipleImages: '',
});

const activeImg = ref('');
onLoad((option) => {
  checkPoints();
  getDetailById(option.id);
});

const checkPoints = () => {
  // 获取用户身上AI总次数
  getPoints().then((res) => {
    // console.log('getPoints', res);
  });
};

const getDetailById = (id) => {
  uni.showLoading({ title: '图片生成中', mask: true });
  aiGetById({ id }).then((res) => {
    console.log('res', res);
    if (res.data.jobType === 1 || res.data.jobType === 0) {
      userMessage.value = res.data;
      activeImg.value = res.data?.multipleImages?.split(',')[0];
      setTimeout(() => {
        getDetailById(id);
      }, 2000);
    } else if (res.data.jobType === 2) {
      uni.hideLoading();
      userMessage.value = res.data;
      activeImg.value = res.data?.multipleImages?.split(',')[0];
    } else {
      uni.hideLoading();
      uni.showToast({
        title: '生成失败, 请稍后再试',
        icon: 'none',
      });
    }
  });
};

const bindGo = () => {
  uni.setStorageSync('aiImage', activeImg.value)
  router.pushTab({
    path: '/pages/design/index',
    query: {
      multipleImages: activeImg.value,
    },
  });
};
</script>

<style scoped lang="scss">
.rst-content {
  padding: 0 0 200rpx;
  .rst-content-body {
    .rst-user {
      padding: 20rpx 32rpx;
      display: flex;
      gap: 24rpx;
      background: #ffffff;
      .user-img {
        flex-shrink: 0;
        width: 108rpx;
        height: 108rpx;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
      }
      .time-txt {
        display: flex;
        flex-direction: column;
        gap: 16rpx;
        .time {
          font-weight: 400;
          font-size: 24rpx;
          color: #6f6f6f;
          line-height: 32rpx;
        }
        .text {
          font-weight: 400;
          font-size: 24rpx;
          color: #222222;
          line-height: 34rpx;
        }
      }
    }
    .rst-ai {
      margin: 10rpx 32rpx;
      background: #f3f7f8;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      padding: 16rpx;
      .ai-tip {
        font-weight: 400;
        font-size: 24rpx;
        color: #222222;
        line-height: 32rpx;
        margin: 16rpx 0 20rpx;
      }
      .rst-img {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20rpx;
        .rst-img-box {
          position: relative;

          .cicrle {
            position: absolute;
            top: 16rpx;
            left: 16rpx;
            width: 32rpx;
            height: 32rpx;
            border: 2rpx solid #707070;
            border-radius: 50%;
          }
          .active {
            position: absolute;
            top: 16rpx;
            left: 16rpx;
            width: 32rpx;
            height: 32rpx;
            border-radius: 50%;
          }
        }
        .rst-img-item{
          width: 100%;
          margin: auto;
        }
      }
    }
  }
}
.bindChoose {
  position: fixed;
  bottom: 20rpx;
  width: 630rpx;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 60rpx;
  background: #F25A27;
  border-radius: 8rpx;
  font-weight: 400;
  font-size: 24rpx;
  color: #FFFFFF;
  line-height: 60rpx;
  text-align: center;
}
</style>
